import { cropper } from "vue-picture-cropper";
import { ChangeAvatar } from "@/api";

export const useContent = () => {
    const dialogVisible = ref(false);
    const isLoading = ref(false);
    const image = ref("");
    const fileName = ref("");
    const userStore = useUserStore();

    const onConfirm = async () => {
        const file = await cropper.getBlob();
        const formData = new FormData();
        formData.append(
            "file",
            new File([file], fileName.value, { type: file.type })
        );
        isLoading.value = true;
        const res = await ChangeAvatar(formData);
        isLoading.value = false;
        if (res.code == 200) {
            dialogVisible.value = false;
            window.URL.revokeObjectURL(image.value);
            userStore.GET_AVATAR();
        } else {
            Message().error(res.msg);
        }
    };

    const onCancel = () => {
        dialogVisible.value = false;
        window.URL.revokeObjectURL(image.value);
    };

    return {
        dialogVisible,
        image,
        fileName,
        isLoading,
        onCancel,
        onConfirm,
    };
};
